<template>
  <div class="type">
    <!-- top -->
    <TopView name="type" title="分类" msg="喜欢雨天厚厚的棉被，喜欢图书馆里的诗集，喜欢黄昏时分浓丽的晚霞，喜欢四季更迭的季风讯息"></TopView>

    <div class="type-wrap">
      <!-- 分类标签 -->
      <div class="flags">
        <el-badge v-for="item in types" :key="item.id" :value="item.blogs.length" class="item">
          <el-button size="small" :type="activeTypeId === item.id ? 'primary' : ''" :plain="activeTypeId === item.id ? false : true" @click="getBlogsByTypeId(item.id)">{{ item.name }}</el-button>
        </el-badge>
      </div>

      <!-- 文章列表 -->
      <BlogListView :blogs="list"></BlogListView>
    </div>
  </div>
</template>

<script>
import typeApi from '@/api/type'
import TopView from '@/components/TopView.vue'
import BlogListView from '@/components/BlogListView.vue'
export default {
  name: 'TypeView',
  components: {
    TopView,
    BlogListView
  },
  data() {
    return {
      types: [],
      activeTypeId: '-1',
      list: []
    }
  },
  created() {
    this.getTypes()
    this.getBlogsByTypeId(this.activeTypeId)
  },
  methods: {
    getTypes() {
      typeApi.types().then(res => {
        this.types = res.data.data
      })
    },
    getBlogsByTypeId(activeTypeId) {
      typeApi.list({ id: activeTypeId }).then(res => {
        this.activeTypeId = res.data.data.activeTypeId
        this.list = res.data.data.blogs
      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-badge__content {
  background-color: #0bbd87;
}
/deep/ .el-button--primary {
  background-color: #15bd8b;
  border-color: #15bd8b;
}

.type {
  width: 100%;
  height: auto;

  .type-wrap {
    width: 100%;
    height: auto;
    padding: 0 10%;
    box-sizing: border-box;
    opacity: 0.95;
    display: flex;
    flex-direction: column;
    position: relative;
    top: -60px;
    left: 0;

    .flags {
      width: 80%;
      height: auto;
      margin: 0 auto 30px auto;
      padding: 30px;
      box-sizing: border-box;
      border-radius: 5px;
      border: 1px solid #eaeefb;
      background-color: #fff;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
      display: flex;
      justify-content: center;
      // align-items: center;
      flex-flow: row wrap;

      .item {
        margin-top: 10px;
        margin-right: 30px;
        height: 40px;
      }
    }
  }
}
</style>
